<template>
    <div class="SSZ">
        <header>
            <van-nav-bar
            title="我的鉴定"
            left-arrow
            />
            <van-tabs v-model="active" class="Syhj">
            <van-tab title="优惠卷" class="Smada1">
                <div class="Sxhx"></div>
                <div class="Syhj1">
                    <div class="SZP">图片</div>
                    <div class="SZP1">
                        <ul>
                            <li>$50</li>
                            <li>满1135减50</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="SSY">去使用</div>
                </div>
                <div class="S2yhj1">
                    <div class="S2ZP">图片</div>
                    <div class="S2ZP1">
                        <ul>
                            <li>$100</li>
                            <li>满2235减100</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="S2SY">去使用</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li>$150</li>
                            <li>满3335减150</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="S3SY">去使用</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li>$200</li>
                            <li>满4335减200</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="S3SY">去使用</div>
                </div>
                
                
                
                
            </van-tab>

            <van-tab title="红包" class="Sma1">
                <div class="Sxhx"></div>
                <div class="Syhj1">
                    <div class="SZP">图片</div>
                    <div class="SZP2">
                        <ul>
                            <li>新人大奖</li>
                            <li>2018.11.11-2018.11.11</li>
                        </ul>
                    </div>
                    <div class="SSYz">$200</div>
                    <div class="SSY4">查看</div>
                </div>
                <div class="S2yhj1">
                    <div class="S2ZP">图片</div>
                    <div class="S2ZP2">
                        <ul>
                            <li>分享有奖</li>
                            <li>2018.5.8-2018.5.30</li>
                        </ul>
                    </div>
                    <div class="SSYz1">$20</div>
                    <div class="S4SY">查看</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li>店铺红包</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="SSYz2">$30</div>
                    <div class="S4SY">查看</div>
                </div>
                <div class="S3yhj1">
                    <div class="S3ZP">图片</div>
                    <div class="S3ZP1">
                        <ul>
                            <li>商家红包</li>
                            <li>2018.2.8-2018.2.30</li>
                        </ul>
                    </div>
                    <div class="SSYz2">$30</div>
                    <div class="S4SY">查看</div>
                </div>
                </van-tab>
            </van-tabs>
            
        </header>

        <section>
             
            
        </section>

        <footer>
            
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
      active:0
    };
  },
  methods:{
      
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
.Sxhx{
    height: 0.8rem;
    border-bottom: 1px solid #000
}
.Syhj1{
    height: 2.5rem;
    border-bottom: 1px solid #000;
}
.S2yhj1{
    height: 2.5rem;
    border-bottom: 1px solid #000;
}
.S3yhj1{
    height: 2.5rem;
    border-bottom: 1px solid #000;
}
.Syhj1 .SZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin: 0.5rem 0 0 0.5rem;
    float: left;
}
.S2yhj1 .S2ZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin-top: 0.5rem;
    float: left;
    margin-left: 0.5rem;
}
.S3yhj1 .S3ZP{
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    margin-top: 0.5rem;
    float: left;
    margin-left: 0.58rem;
}
.Syhj1 .SZP1{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.4rem
}
.Syhj1 .SZP2{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.9rem;
}
.S2yhj1 .S2ZP1{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.5rem
}
.S2yhj1 .S2ZP2{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.5rem
}
.S3yhj1 .S3ZP1{
    width: 3rem;
    height: 1.5rem;
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.42rem;
}
.Syhj1 .SZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.Syhj1 .SZP2 li{
    float: left;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}

.S2yhj1 .S2ZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.S2yhj1 .S2ZP2 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.S3yhj1 .S3ZP1 li{
    float: left;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
}
.Syhj1 .SSY{
    margin-left: 0.7rem ;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 0.8rem;
}
.SSY4{
    margin-left: 0.2rem ;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;

}
.S4SY{
    margin-left: 0.7rem ;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
}
.Syhj1 .SSYz{
   width: 1rem;
    height: 0.4rem;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 0.7rem;
    margin-left: 0.2rem 
}
.S2yhj1 .S2SY{
    margin-left: 0.7rem;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 0.8rem;
}
.S2yhj1 .SSYz1{
    margin-top: 0.5rem;
    width: 1rem;
    height: 0.4rem;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-left: 0.7rem;
}
.SSYz2{
    margin-top: 0.5rem;
    width: 1rem;
    height: 0.4rem;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-left: 0.7rem;
}
.S3yhj1 .S3SY{
    margin-left: 0.7rem;
    width: 1rem;
    height: 0.4rem;
    border:1px solid #ccc;
    float: left; 
    text-align: center;
    border-radius: 20%;
    line-height: 0.4rem;
    margin-top: 0.8rem;
}
header,footer{
    height:0.8rem; 
}
section{
    flex:1;
    overflow:auto;
}



</style>


